<template>
  <el-dialog
    v-el-drag-dialog
    title="用户证件类型详情"
    custom-class="cert-detail-dialog"
    :visible.sync="visible"
    width="700px"
    append-to-body
    @close="reset"
  >
    <el-carousel :interval="5000" arrow="always" :autoplay="false" indicator-position="outside" @change="carouselChange">
      <el-carousel-item v-for="item in annexList" :key="item.id">
        <div class="img-container">
          <img :src="imgBaseUrl+item.url" alt="">
        </div>
      </el-carousel-item>
    </el-carousel>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="pcUpload">
        电脑上传
      </el-button>
      <el-button type="primary" @click="phoneUpload">
        手机上传
      </el-button>
      <el-button type="primary" @click="deleteUserCert">
        删除图片
      </el-button>
    </div>
    <pc-upload ref="pcUpload" />
    <phone-upload ref="phoneUpload" />
  </el-dialog>
</template>

<script>
  import { queryUserAnnexList, queryUserAnnexListStatus, queryDeleteUserCertQiniu } from '@/api'
  import { imgBaseUrl } from '@/utils/config'
  import PcUpload from './PcUpload'
  import PhoneUpload from './PhoneUpload'

  export default {
    name: 'cert-detail',
    components: {
      PcUpload, PhoneUpload
    },
    data() {
      return {
        imgBaseUrl,
        visible: false,
        activeIndex: 0,
        id: '',
        annexList: [],
        checkInterval: null
      }
    },
    beforeDestroy() {
      clearInterval(this.checkInterval)
      this.checkInterval = null
      this.$once('hook: beforeDestory', () => {
        clearInterval(this.checkInterval)
      })
    },
    methods: {
      async open(temp) {
        this.getUserAnnex(temp.id)
        this.checkingPay()
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) this.id = temp.id
        })
      },
      // 加载附件信息
      async getUserAnnex(id) {
        const res = await queryUserAnnexList({ id })
        // this.annexList = res.data
        this.$set(this, 'annexList', res.data)
      },
      // 轮询查看附件列表是否更新
      checkingPay() {
        const _this = this
        this.checkInterval = setInterval(function() {
          _this.selectFilelistStatus()
        }, 5000)
      },
      async selectFilelistStatus() {
        const res = await queryUserAnnexListStatus({
          id: this.id,
          sysAttachmentList: this.annexList
        })
        if (res.data) this.getUserAnnex(this.id)
      },
      // 电脑上传
      async pcUpload() {
        await this.$refs.pcUpload.open(3 - this.annexList.length, this.id)
        this.getUserAnnex(this.id)
      },
      // 手机上传
      async phoneUpload() {
        await this.$refs.phoneUpload.open(this.id)
      },
      // 删除图片
      async deleteUserCert() {
        if (this.annexList.length === 0) return
        this.$confirm('删除用户证件图片不可恢复，确定要执行吗？', '提示', {
          type: 'warning'
        }).then(() => {
          const loading = this.$message({
            message: '正在删除',
            duration: 0,
            iconClass: 'el-icon-loading'
          })
          queryDeleteUserCertQiniu({
            id: this.id,
            attachmentId: this.annexList[this.activeIndex].id
          }).then(() => {
            this.annexList.splice(this.activeIndex, 1)
          }).finally(() => {
            loading.close()
          })
        })
      },
      // 图片切换
      carouselChange(index) {
        this.activeIndex = index
      },
      reset() {
        this.annexList = []
        clearInterval(this.checkInterval)
        this.checkInterval = null
      }
    }
  }
</script>

<style lang="scss" scoped>
/deep/ .cert-detail-dialog.el-dialog .el-dialog__body {
  height: 500px;
}
.cert-detail-dialog {
  .el-carousel {
    height: 100%;
  }
}
/deep/ .cert-detail-dialog .el-carousel__container {
  height: 94%;
}
.img-container {
  height: 100%;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>
